<template>
	<view class="nft_container_bg">
		<view class="presented_card">
			<img width=150 :src="presentedNft.metadataImage" alt="">
			<p class="nft_title">{{presentedNft.themeName}}</p>
			<p class="nft_serialNo">{{presentedNft.serialNo}}</p>
		</view>
		<u--form
			class="presented_form"
			ref="uForm"
			labelWidth="auto"
			labelPosition="top"
			:model="model1"
			:rules="rules"
			:labelStyle="labelStyle"
		>
			<u-form-item
				label="接收人手机号"
				prop="tel"
				ref="item1"
			>
				<u--input
					color="#fff"
					class="presented_input"
					border="surround"
					placeholder="请输入接收人手机号"
					v-model="model1.tel"
				></u--input>
			</u-form-item>
			<u-form-item
				label="接收人链钱包地址"
				prop="dre"
				ref="item1"
			>
				<u--input
					color="#fff"
					class="presented_input"
					placeholder="请输入接收人链钱包地址"
					v-model="model1.dre"
					border="surround"
				></u--input>
			</u-form-item>
		</u--form>
		<u-button class="presented_btn" shape="circle" color="var(--echo-main-color)" @click="submit">确定</u-button>
		<p>转增说明</p>
		<view class="presented_explain">
			转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明转增说明
		</view>
		<u-popup closeable bgColor="#444" :closeOnClickOverlay="false" :show="show" mode="bottom" :round="10" @close="close" @open="open">
		  <view class="presented_popup">
		    <p>确定接收人信息</p>
				<view class="presented_popup_content">
					接收人手机号<p>{{model1.tel}}</p>
					接收人链钱包地址<p>{{model1.dre}}</p>
				</view>
				<u-button class="presented_btn" shape="circle" color="var(--echo-main-color)" @click="presented">确定</u-button>
		  </view>
			</u-popup>
	</view>
</template>

<script>
	import {
		getMyNft,
		giveAway,
		getPositionDetails
	} from '@/config/nftApi.js';
	export default {
		data(){
			return {
				customerNo:'',
				show:false,
				presentedNft:{
					},
				model1:{
					tel:'',
					dre:'',
				},
				rules: {
					tel: [
						{
							required: true,
							message: '请输入接收人手机号',
						}
					],
					dre: [
						{
							required: true,
							message: '请输入接收人手机号',
						}
					],
				},
				labelStyle:{
					color:'#fff',
				}
			}
		},
		created() {
			// 客户编号
			this.customerNo = uni.getStorageSync('customerNo')
		},
		onLoad({
			serialNo
		}) {
			console.log(serialNo)
			// 取租户ID
			let tenantId = getApp().globalData.tenantId
				getMyNft({
					serialNo,
					type: '0'
				}).then(res => {
					if (res) {
						console.log(res)
						// 基本信息
						this.presentedNft = res.data
					}
				})
				return
		},
		methods:{
			async presented(){
				let res = await giveAway({
					// 赠送
					from: this.customerNo,
					// 接受
					phone: this.model1.tel,
					walletAddress:this.model1.dre,
					// nft编号
					typeNo: this.presentedNft.serialNo,
					// 类型
					type: 0})
					if(res.code==='000000'){
						uni.showToast({
							icon: 'success',
							position: 'bottom',
							title: '转让成功'
						});
						uni.navigateTo({
							url: "/pages/my/myNft"
						})
					}
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					this.show = true
				}).catch(errors => {
					return
				})
			},
      close() {
        this.show = false
        // console.log('close');
      }
		}
	}
</script>

<style lang="scss" scoped>
	.nft_container_bg {
		min-height: 100vh;
		background: $echo-nft-bg-color;
		padding: 40rpx;
		p {
			text-align: center;
			font-size: 14px;
			color: #fff;
		}
		.presented_card {
			text-align: center;
			p {
				margin: 20rpx 0;
			}
			.nft_title {
				font-size: 16px;
				color: #fff;
			}
			.nft_serialNo {
				color: #888;
			}
		}
		.presented_btn {
			margin: 40rpx 0;
		}
		.presented_explain {
			margin-top: 10rpx;
			font-size: 28rpx;
			color: #888;
		}
		.presented_popup {
			padding: 30rpx;
			color: #999;
			p {
				color: #fff;
				margin-bottom: 20rpx;
			}
		.presented_popup_content {
			margin-top: 20rpx;
			text-align: left;
			p {
				text-align: left;
			}
		}
		}
	}
</style>
